import React, { Component } from 'react';
import {
  StyleSheet, View, Image,
  DeviceEventEmitter, TouchableOpacity,
} from 'react-native';
import { Text } from 'native-base';
import { Block } from '../../../components/detail/index';
import Theme from '../../../native-base-theme/variables/commonColor';
import * as incidentRequest from '../../../services/incidentRequest';

const data = [{
  type: 'block',
  showHeader: false,
  title: '故障信息',
  contents: [{
    label: '编号',
    key: 'failureCode',
    value: '',
  }, {
    label: '现象',
    key: 'failureDesc',
    value: '',
  }, {
    label: '照片',
    key: 'failurePic',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }, {
    label: '类型',
    key: 'failureTypeDesc',
    value: '',
  }, {
    label: '紧急程度',
    key: 'failureLevelDesc',
    value: '',
  }, {
    label: '维修班组',
    key: 'maintOrgIdDesc',
    value: '',
  }, {
    label: '状态',
    key: 'failureStatusDesc',
    value: '',
  }, {
    label: '报修人',
    key: 'reporterDesc',
    value: '',
  }, {
    label: '报修人联系电话',
    key: 'reporterPhone',
    value: '',
  }],
}];

const dataSafePeople = [{
  type: 'block',
  showHeader: false,
  title: '安全隐患信息',
  contents: [{
    label: '编号',
    key: 'failureCode',
    value: '',
  }, {
    label: '现象',
    key: 'failureDesc',
    value: '',
  }, {
    label: '照片',
    key: 'failurePic',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }, {
    label: '类型',
    key: 'failureTypeDesc',
    value: '',
  }, {
    label: '位置描述',
    key: 'location',
    value: '',
  }, {
    label: '隐患类型',
    key: 'hiddenDangerTypeDesc',
    value: '',
  }, {
    label: '人员姓名',
    key: 'name',
    value: '',
  }, {
    label: '归属部门',
    key: 'hiddenDangerOrgIdDesc',
    value: '',
  }, {
    label: '隐患等级',
    key: 'failureLevelDesc',
    value: '',
  }, {
    label: '安全部门',
    key: 'maintOrgIdDesc',
    value: '',
  }, {
    label: '状态',
    key: 'failureStatusDesc',
    value: '',
  }, {
    label: '报修人',
    key: 'reporterDesc',
    value: '',
  }, {
    label: '报修人联系电话',
    key: 'reporterPhone',
    value: '',
  }],
}];

const dataSafeDevice = [{
  type: 'block',
  showHeader: false,
  title: '安全隐患信息',
  contents: [{
    label: '编号',
    key: 'failureCode',
    value: '',
  }, {
    label: '现象',
    key: 'failureDesc',
    value: '',
  }, {
    label: '照片',
    key: 'failurePic',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }, {
    label: '类型',
    key: 'failureTypeDesc',
    value: '',
  }, {
    label: '位置描述',
    key: 'location',
    value: '',
  }, {
    label: '隐患类型',
    key: 'hiddenDangerTypeDesc',
    value: '',
  }, {
    label: '隐患等级',
    key: 'failureLevelDesc',
    value: '',
  }, {
    label: '安全部门',
    key: 'maintOrgIdDesc',
    value: '',
  }, {
    label: '状态',
    key: 'failureStatusDesc',
    value: '',
  }, {
    label: '报修人',
    key: 'reporterDesc',
    value: '',
  }, {
    label: '报修人联系电话',
    key: 'reporterPhone',
    value: '',
  }],
}];

const dataSafeDefect = [{
  type: 'block',
  showHeader: false,
  title: '安全隐患信息',
  contents: [{
    label: '编号',
    key: 'failureCode',
    value: '',
  }, {
    label: '现象',
    key: 'failureDesc',
    value: '',
  }, {
    label: '照片',
    key: 'failurePic',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }, {
    label: '类型',
    key: 'failureTypeDesc',
    value: '',
  }, {
    label: '位置描述',
    key: 'location',
    value: '',
  }, {
    label: '隐患类型',
    key: 'hiddenDangerTypeDesc',
    value: '',
  }, {
    label: '归属部门',
    key: 'hiddenDangerOrgIdDesc',
    value: '',
  }, {
    label: '隐患等级',
    key: 'failureLevelDesc',
    value: '',
  }, {
    label: '安全部门',
    key: 'maintOrgIdDesc',
    value: '',
  }, {
    label: '状态',
    key: 'failureStatusDesc',
    value: '',
  }, {
    label: '报修人',
    key: 'reporterDesc',
    value: '',
  }, {
    label: '报修人联系电话',
    key: 'reporterPhone',
    value: '',
  }],
}];

const dataNoMaintOrgIdDesc = [{
  type: 'block',
  showHeader: false,
  title: '信息',
  contents: [{
    label: '编号',
    key: 'failureCode',
    value: '',
  }, {
    label: '现象',
    key: 'failureDesc',
    value: '',
  }, {
    label: '照片',
    key: 'failurePic',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }, {
    label: '类型',
    key: 'failureTypeDesc',
    value: '',
  }, {
    label: '紧急程度',
    key: 'failureLevelDesc',
    value: '',
  }, {
    label: '状态',
    key: 'failureStatusDesc',
    value: '',
  }, {
    label: '报修人',
    key: 'reporterDesc',
    value: '',
  }, {
    label: '报修人联系电话',
    key: 'reporterPhone',
    value: '',
  }],
}];

// {
//   label: '设备名称',
//   key: 'equipmentName',
//   value: '',
// },

const maintainInfo = [{
  type: 'block',
  showHeader: false,
  title: '维修信息',
  contents: [{
    label: '维修责任人',
    key: 'maintPersonName',
    value: '',
  }, {
    label: '维修团队人员',
    key: 'maintTeamMembername',
    value: '',
  }, {
    label: '工作票号',
    key: 'billCode',
    value: '',
  }, {
    label: '原因',
    key: 'failureCause',
  }, {
    label: '处理过程',
    key: 'setp',
    value: '',
  }, {
    label: '遗留问题',
    key: 'remainingProblems',
    value: '',
  }, {
    label: '修复设备照片',
    key: 'pictrue',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }],
}];


const changeParts = [{
  type: 'block',
  showHeader: false,
  title: '零部件更换',
  contentRender: (_data, positions) => {
    console.log('data is ...', _data);
    let up = [];
    let down = [];
    let positons = [];
    let upIndx = 0;
    let downIndex = 0;
    // {`${item.splitCode} ${item.description}`}
    if (positions && positions.length) {
      for (let j = 0, len = positions.length; j < len; j += 1) {
        const item = positions[j];
        positons.push(
          <View style={{ flexDirection: 'row' }} key={j}>
            <Text style={{ color: '#ffffff' }}>{`${j + 1}.`}</Text>
            <Text style={{ color: '#ffffff', flex: 1 }}>
              {/* {`拆分编码：${item.splitCode}\n拆分描述：${item.description}`} */}
              {`${item.description}`}
            </Text>
          </View>,
        );
      }
    }
    for (let i = 0, len = _data.length; i < len; i += 1) {
      const item = _data[i];
      if (item.action == '6') { // 换下
        down.push(
          <View style={{ flexDirection: 'row' }} key={i}>
            <Text style={{ color: '#ffffff' }}>{`${downIndex += 1}.`}</Text>
            <Text style={{ color: '#ffffff', flex: 1 }}>
              {/* {`位置：${item.description}\n物料名称：${item.materialName}\n备件编码：${item.lotCode ? item.lotCode : '首次换上'}`} */}
              {`${item.splitCode}@${item.materialName} ${item.lotCode ? item.lotCode : '首次换下'}`}
            </Text>
          </View>,
        );
      }
      if (item.action == '5') { // 换上
        up.push(
          <View style={{ flexDirection: 'row' }} key={i}>
            <Text style={{ color: '#ffffff' }}>{`${upIndx += 1}.`}</Text>
            <Text key={i} style={{ color: '#ffffff', flex: 1 }}>
              {/* {`位置：${item.description}\n物料名称：${item.materialName}\n备件编码：${item.lotCode ? item.lotCode : '首次换上'}`} */}
              {`${item.splitCode}@${item.materialName} ${item.lotCode ? item.lotCode : '首次换上'}`}
            </Text>
          </View>,
        );
      }
    }
    up = up.length ? up : (
      <Text style={{ color: '#ffffff' }}>   -</Text>
    );
    down = down.length ? down : (
      <Text style={{ color: '#ffffff' }}>   -</Text>
    );
    positons = positons.length ? positons : (
      <Text style={{ color: '#ffffff' }}>   -</Text>
    );
    return (
      <View>
        <View>
          <Text style={{ color: '#ffffff' }}>故障位置</Text>
          <View>
            {positons}
          </View>
        </View>
        <View>
          <Text style={{ color: '#ffffff', marginTop: 12 }}>换上</Text>
          <View>
            {up}
          </View>
        </View>
        <View>
          <Text style={{ color: '#ffffff', marginTop: 12  }}>换下</Text>
          <View>
            {down}
          </View>
        </View>
      </View>
    );
  },
}];

const acceptInfo = [{
  type: 'block',
  showHeader: false,
  title: '验收信息',
  contents: [{
    label: '验收意见',
    key: 'check',
    value: '',
  }, {
    label: '验收图片',
    key: 'closedPicture',
    value: [],
    type: 'image',
    render: (item) => {
      if (item.value && item.value.length) { // 有图片
        const uri = `${incidentRequest.getDownloadImg}/${item.value[0]}?token=${global.__TOKEN_ACCESS__}`;
        return (
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('showBigImage', {
                show: true,
                url: uri,
              });
            }}
            style={{ width: '100%', height: 80 }}
          >
            <Image
              style={{ width: '100%', height: '100%' }}
              source={{ uri }}
            />
          </TouchableOpacity>
        );
      }
      return (
        <Text style={{ color: '#ffffff' }}>    -</Text>
      );
    },
  }],
}];
class Tab1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  /**
   * 根据页面状态展示不同的信息
   * @param {String} param  oneBlock 仅仅展示维修信息
   *                        twoBlock 展示两块 基本信息和维修信息
   *                        threeBlock 展示三块 基本信息和维修信息和验收信息
  */
  _getPage = (type) => {
    const list = [];
    let key = 0;
    let loopData;
    if (this.props.data.failureType == '09' && this.props.data.hiddenDangerType == '3') {
      loopData = dataSafeDevice;
    } else if (this.props.data.failureType == '09' && this.props.data.hiddenDangerType == '1') {
      loopData = dataSafePeople;
    } else if (this.props.data.failureType == '09' && this.props.data.hiddenDangerType == '4') {
      loopData = dataSafeDefect;
    } else if (this.props.data.failureType == '08') {
      loopData = dataNoMaintOrgIdDesc;
    } else {
      loopData = data;
    }
    if (type === 'twoBlock') { // 维修
      loopData = loopData.concat(maintainInfo);// 添加维修信息
      loopData = loopData.concat(changeParts);// 换上换下信息
    } else if (type === 'threeBlock') { // 验收
      loopData = loopData.concat(maintainInfo);// 添加维修信息
      loopData = loopData.concat(changeParts);// 换上换下信息
      loopData = loopData.concat(acceptInfo);// 添加验收
    }
    // list.push(this._showTitle(type));
    loopData.forEach((item, index) => {
      this._deepTraversal(item);
      list.push(
        this._showTitle(index, key += 1),
        <Block
          data={item}
          key={key += 1}
          changePartsData={this.props.changePartsData}
          failurePositions={this.props.failurePositions}
        />,
      );
    });
    return list;
  }

  _deepTraversal = (obj) => {
    if (!obj) return;
    if (obj.contents && obj.contents.length) {
      obj.contents.map(item => this._deepTraversal(item));
    } else if (obj.contentRender) {
      obj.value = '';
    } else {
      obj.value = this._getValueByFiled(obj.key, obj.type);
    }
  }

  _getValueByFiled = (filed, type) => {
    const value = this.props.data[filed];
    if (value) {
      if (type === 'image') {
        return [value];
      }
      return value;
    }
    if (type === 'image') {
      return [];
    }
    return '';
  }

  // 展示不同的故障单基本信息以及标题
  _showTitle = (type, key) => {
    switch (type) {
      // 故障验收信息
      case 3:
        return (
          <View key={key}>
            <View style={styles.changeTitleContainer}>
              <View>
                <Text style={styles.changeTitleHeader}>验收单</Text>
              </View>
              <View style={styles.changeTitleContent}>
                <Text
                  style={[styles.changeTitleContentItem, styles.itemLeft]}
                >
                  编号： {this.props.data.failureCode}
                </Text>
                <Text
                  style={[styles.changeTitleContentItem]}
                >
                  完成时间：{this.props.data.acceptTime}
                </Text>
              </View>
            </View>
          </View>
        );
      // 故障维修信息
      case 1:
        return (
          <View key={key}>
            <View
              style={styles.changeTitleContainer}
            >
              <View>
                <Text style={styles.changeTitleHeader}>维修单</Text>
              </View>
              <View style={styles.changeTitleContent}>
                <Text
                  style={[styles.changeTitleContentItem, styles.itemLeft]}
                >
                  编号： {this.props.data.failureCode}
                </Text>
                <Text
                  style={[styles.changeTitleContentItem]}
                >
                  完成时间：{this.props.data.maintTime}
                </Text>
              </View>
            </View>
          </View>
        );
      // 换上换下
      case 2:
        return (
          <View key={key}>
            <View style={styles.changeTitleContainer}>
              <View>
                <Text style={styles.changeTitleHeader}>零部件更换信息</Text>
              </View>
            </View>
          </View>
        );
      // 基本信息
      default:
        return (
          <View key={key}>
            <View
              style={styles.changeTitleContainer}
            >
              <View>
                <Text style={styles.changeTitleHeader}>基本信息</Text>
              </View>
              <View style={styles.changeTitleContent}>
                <Text
                  style={[styles.changeTitleContentItem, styles.itemLeft]}
                >
                  编号： {this.props.data.failureCode}
                </Text>
                <Text
                  style={[styles.changeTitleContentItem]}
                >
                  申报时间：{this.props.data.declareTime}
                </Text>
              </View>
            </View>
          </View>
        );
    }
  }

  render() {
    return (
      <View style={styles.tabContent}>
        {this._getPage(this.props.baseInfoType)}
        {/* {this._getPage(1)}
        {this._getPage(2)} */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    minHeight: '100%',
    backgroundColor: Theme.myPrimary,
    color: '#ffffff',
  },
  changeTitleContainer: {
    marginTop: 15,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: 'rgba(255, 255, 255 ,0.2)',
    borderRadius: 5,
    padding: 10,
    position: 'relative',
  },
  changeTitleHeader: {
    color: '#ffffff',
    fontSize: 20,
  },
  changeTitleContent: {
    display: 'flex',
    flexDirection: 'row',
    flex: 1,
    flexWrap: 'wrap',
  },
  changeTitleContentItem: {
    color: '#a4a4a4',
    fontSize: 13.5,
  },
  itemLeft: {
    marginRight: 10,
  },
});

export default Tab1;
